<!-- html 模板界面  -->
<!-- 
 编程思想:
            1. 点击添加按钮，获取输入框内容，添加到列表显示
            2. 点击删除按钮，根据索引号删除数组中指定元素  list.splice(0,1)

     ref包谷的数据，是响应式数据， 数据变化界面会自动更新
     
            -->

<template>
	<div>
		<h2>todoList应用</h2>
		<input placeholder="请输入内容" name="message" v-model="inputValue"/>
		<button class="btn" @click="bindAdd">添加</button>
		<ul>
			<li v-for="(item,index) in list">
           {{item}} 
           <button @click="bindDelete(index)">删除</button>
      </li>
		</ul>
	</div>
</template>

<!-- javascript代码业务逻辑 -->
<script setup>
import { ref } from 'vue'

const inputValue = ref('')
const list = ref(['html'])

// 添加
const bindAdd = ()=>{
   list.value.push(inputValue.value)  //添加元素
   inputValue.value = '' //清除input输入框内容
}

// 删除
const bindDelete = (index)=>{
   list.value.splice(index,1)
}

</script>

<!-- css样式 -->
<style lang="css" scoped>
.btn {
	border: none;
	background-color: blueviolet;
	color: wheat;
	width: 100px;
	height: 30px;
}
input {
	height: 30px;
	margin-right: 10px;
}
</style>
